<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="mapstatic-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="mapstatic_wrap">
      <div class="map-static" ref="parent" @mousemove="updateMouse($event)">
        <div
          class="map__wrapper"
          :class="{
            map__wrapper__blur: !hadDrag,
          }"
          ref="wrapper"
          :style="dragStyle"
          :draggable="active"
          @mousedown="dragStart($event)"
          @mouseup="dragEnd"
          @mousemove="drag($event)"
          @mouseleave="dragEnd"
          @touchstart="dragStart($event)"
          @touchend="dragEnd"
          @touchmove="drag($event)"
          @wheel="onWheel"
        >
          <img
            class="map__img"
            :src="map"
            alt="map image"
            @load="onLoadImage"
          />
          <div
            v-for="(marker, idx) in markers"
            :key="marker.key"
            class="map__marker"
            :class="[
              {
                'is-blur': isDetailOpen && idx !== focusIdx,
                'is-active': idx == focusIdx,
              },
              marker.textPos ? `is-name-${marker.textPos}` : null,
            ]"
            :style="getMarkerPos(marker.x_coordinates, marker.y_coordinates)"
            :data-title="marker.name"
            @click="openDetail(idx)"
            @mouseover="setHoverIdx(idx)"
            @mouseleave="removeHoverIdx(idx)"
          ></div>
        </div>

        <transition name="fade">
          <div class="map__detail" v-show="isDetailOpen">
            <MapStaticDetail :componentProps="focosObj" @close="closeDetail" />
          </div>
        </transition>
        <template v-if="!isDetailOpen">
          <div class="map-prev" v-show="showPrevArrow"></div>
          <div class="map-next" v-show="showNextArrow"></div>
          <div class="map-up" v-show="showUpArrow"></div>
          <div class="map-down" v-show="showDownArrow"></div>
        </template>
        <transition name="fade">
          <div v-if="!hadDrag">
            <div
              class="map-hint"
              v-if="!isMobileOrTablet"
              :style="{ left: `${mouseX}px`, top: `${mouseY}px` }"
            >
              拖动以查看更多学校
            </div>
            <div class="map-hint-fullscreen flex-center" v-else>
              <div class="map-hint-fullscreen__hint">拖动以查看更多学校</div>
            </div>
          </div>
        </transition>
      </div>
    </div>

    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";
import MapStaticDetail from "./components/MapStaticDetail.vue";

// 定义组件名称
defineOptions({
  name: "MapStatic",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

// const timer = null;

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.map) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "MapStatic",
    map: "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
    x_coordinates: 49.4,
    y_coordinates: 70,
    zoom_desktop: 1.75,
    zoom_mobile: 2.25,
    bgColor: "#f5f5f5",
    markers: [
      {
        key: "marker-1",
        name: "北京校区",
        x_coordinates: 25.5,
        y_coordinates: 35.2,
        textPos: "left",
        list: [
          {
            title: "香港中央图书馆",
            desc: "香港最大的公共图书馆，提供丰富的图书资源和学习空间。位于铜锣湾核心地带，交通便利。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "香港中央图书馆外观",
            phone: "+852 2921 0222",
            email: "info@hkpl.gov.hk",
            link: "https://www.hkpl.gov.hk",
            linkName: "访问图书馆官网",
            id: randomString(),
          },
          {
            title: "维多利亚港观景台",
            desc: "欣赏维多利亚港美景的最佳地点之一，可以观看到香港岛和九龙半岛的壮丽景色。每晚8点有幻彩咏香江灯光秀。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "维多利亚港夜景",
            phone: "+852 2508 1234",
            email: "tourism@discoverhongkong.com",
            link: "https://www.discoverhongkong.com/tc/see-do/highlight-attractions/harbour-views/symphony-of-lights.html",
            linkName: "了解更多景点信息",
            id: randomString(),
          },
        ],
      },
      {
        key: "marker-2",
        name: "上海校区",
        x_coordinates: 65.8,
        y_coordinates: 45.6,
        textPos: "right",
        list: [
          {
            title: "香港中央图书馆",
            desc: "香港最大的公共图书馆，提供丰富的图书资源和学习空间。位于铜锣湾核心地带，交通便利。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "香港中央图书馆外观",
            phone: "+852 2921 0222",
            email: "info@hkpl.gov.hk",
            link: "https://www.hkpl.gov.hk",
            linkName: "访问图书馆官网",
            id: randomString(),
          },
          {
            title: "维多利亚港观景台",
            desc: "欣赏维多利亚港美景的最佳地点之一，可以观看到香港岛和九龙半岛的壮丽景色。每晚8点有幻彩咏香江灯光秀。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "维多利亚港夜景",
            phone: "+852 2508 1234",
            email: "tourism@discoverhongkong.com",
            link: "https://www.discoverhongkong.com/tc/see-do/highlight-attractions/harbour-views/symphony-of-lights.html",
            linkName: "了解更多景点信息",
            id: randomString(),
          },
        ],
      },
      {
        key: "marker-3",
        name: "广州校区",
        x_coordinates: 40.2,
        y_coordinates: 60.8,
        textPos: "left",
        list: [
          {
            title: "香港中央图书馆",
            desc: "香港最大的公共图书馆，提供丰富的图书资源和学习空间。位于铜锣湾核心地带，交通便利。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "香港中央图书馆外观",
            phone: "+852 2921 0222",
            email: "info@hkpl.gov.hk",
            link: "https://www.hkpl.gov.hk",
            linkName: "访问图书馆官网",
            id: randomString(),
          },
          {
            title: "维多利亚港观景台",
            desc: "欣赏维多利亚港美景的最佳地点之一，可以观看到香港岛和九龙半岛的壮丽景色。每晚8点有幻彩咏香江灯光秀。",
            image:
              "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
            alt: "维多利亚港夜景",
            phone: "+852 2508 1234",
            email: "tourism@discoverhongkong.com",
            link: "https://www.discoverhongkong.com/tc/see-do/highlight-attractions/harbour-views/symphony-of-lights.html",
            linkName: "了解更多景点信息",
            id: randomString(),
          },
        ],
      },
    ],
  };
  emit("update:modelValue", data);
};
handleInit();
// Types
interface MapInfo {
  map: string;
  x_coordinates: number;
  y_coordinates: number;
  zoom_desktop: number;
  zoom_mobile: number;
}

interface Marker {
  key: string;
  name: string;
  x_coordinates: number;
  y_coordinates: number;
  textPos?: string;
}

interface ComponentProps {
  markers?: Marker[];
  map?: string;
  x_coordinates?: number;
  y_coordinates?: number;
  zoom_desktop?: number;
  zoom_mobile?: number;
}

// Reactive data
const mapInfo = ref<MapInfo>({
  map: "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg",
  x_coordinates: 49.4,
  y_coordinates: 70,
  zoom_desktop: 1.75,
  zoom_mobile: 2.25,
});

const Marker = ref<Marker>({
  key: "marker-1", // 唯一标识
  name: "北京校区", // 显示名称
  x_coordinates: 25.5, // X坐标（百分比）
  y_coordinates: 35.2, // Y坐标（百分比）
  textPos: "bottom", // 文本位置（bottom/left/right）
});

const focusIdx = ref<number>(NaN);
const hoverIdx = ref<number>(NaN);
const isDetailOpen = ref<boolean>(false);

// For drag
const active = ref<boolean>(false);
const currentX = ref<number | null>(null);
const currentY = ref<number | null>(null);
const initialX = ref<number | null>(null);
const initialY = ref<number | null>(null);
const xOffset = ref<number>(0);
const yOffset = ref<number>(0);
const hadDrag = ref<boolean>(false);
const mouseX = ref<number>(0);
const mouseY = ref<number>(0);

// For indicator
const showPrevArrow = ref<boolean>(true);
const showNextArrow = ref<boolean>(true);
const showUpArrow = ref<boolean>(true);
const showDownArrow = ref<boolean>(true);

// Template refs
const parent = ref<HTMLElement>();
const wrapper = ref<HTMLElement>();

// Computed properties
const dragStyle = computed(() => ({
  transformOrigin: `${x_coordinates.value}% 50%`,
  transform: `translate(${xOffset.value}px, ${yOffset.value}px)`,
  height: `${zoom.value * 100}%`,
}));

const focosObj = computed(() =>
  isNaN(focusIdx.value) ? null : markers.value[focusIdx.value]
);

const markers = computed(() => props.modelValue?.markers ?? []);

const map = computed(() => props.modelValue?.map ?? mapInfo.value.map);

const x_coordinates = computed(
  () => props.modelValue?.x_coordinates ?? mapInfo.value.x_coordinates
);

const y_coordinates = computed(
  () => props.modelValue?.y_coordinates ?? mapInfo.value.y_coordinates
);

const zoom_desktop = computed(
  () => props.modelValue?.zoom_desktop ?? mapInfo.value.zoom_desktop
);

const zoom_mobile = computed(
  () => props.modelValue?.zoom_mobile ?? mapInfo.value.zoom_mobile
);

const zoom = computed(() => {
  // Note: $_vsWidth needs to be replaced with proper Vue 3 equivalent
  // This might need to be injected or accessed through a composable
  const vsWidth = typeof window !== 'undefined' ? window.innerWidth : 1024; // SSR safe
  return vsWidth > 768 ? zoom_desktop.value : zoom_mobile.value;
});
const isMobileOrTablet = computed(() => typeof window !== 'undefined' ? window.innerWidth < 1024 : false);

// Methods
const getMarkerPos = (x: number, y: number) => ({
  left: `${x}%`,
  top: `${y}%`,
  transform: `translate(-50%, -75%)`,
});

const openDetail = (idx: number) => {
  focusIdx.value = idx;
  isDetailOpen.value = true;
};

const closeDetail = () => {
  console.log("closeDetail");
  isDetailOpen.value = false;
  setTimeout(() => {
    focusIdx.value = NaN;
  }, 300);
};

const dragStart = (e: MouseEvent | TouchEvent) => {
  if (e.type === "touchstart") {
    const touchEvent = e as TouchEvent;
    initialX.value = touchEvent.touches[0].clientX - xOffset.value;
    initialY.value = touchEvent.touches[0].clientY - yOffset.value;
  } else {
    const mouseEvent = e as MouseEvent;
    initialX.value = mouseEvent.clientX - xOffset.value;
    initialY.value = mouseEvent.clientY - yOffset.value;
  }
  active.value = true;
};

const dragEnd = () => {
  initialX.value = currentX.value;
  initialY.value = currentY.value;
  active.value = false;
};

const drag = (e: MouseEvent | TouchEvent) => {
  if (active.value) {
    e.preventDefault();
    if (e.type === "touchmove") {
      const touchEvent = e as TouchEvent;
      currentX.value = touchEvent.touches[0].clientX - (initialX.value || 0);
      currentY.value = touchEvent.touches[0].clientY - (initialY.value || 0);
    } else {
      const mouseEvent = e as MouseEvent;
      currentX.value = mouseEvent.clientX - (initialX.value || 0);
      currentY.value = mouseEvent.clientY - (initialY.value || 0);
    }
    setOffset(currentX.value, currentY.value);
  }
};

const setOffset = (currentX: number, currentY: number) => {
  let xpos = currentX;
  let ypos = currentY;
  const wrapperEl = wrapper.value;
  const parentEl = parent.value;
  if (!wrapperEl || !parentEl) return;

  const width = wrapperEl.getBoundingClientRect().width;
  const height = wrapperEl.getBoundingClientRect().height;
  const parentHeight = parentEl.getBoundingClientRect().height;
  const vsWidth = typeof window !== 'undefined' ? window.innerWidth : 1024; // SSR safe

  const bound = {
    right: -width + vsWidth / 2,
    left: (-1 * vsWidth) / 2,
    top: -height + parentHeight / 2,
    bottom: (-1 * parentHeight) / 2,
  };

  if (xpos < bound.right) {
    xpos = bound.right;
  } else if (xpos > bound.left) {
    xpos = bound.left;
  }

  if (ypos < bound.top) {
    ypos = bound.top;
  } else if (ypos > bound.bottom) {
    ypos = bound.bottom;
  }

  xOffset.value = xpos;
  yOffset.value = ypos;
};

const onWheel = (e: WheelEvent) => {
  if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
    e.preventDefault();
    const xpos = xOffset.value - e.deltaX;
    setOffset(xpos, yOffset.value);
  }
};

const centerOffset = () => {
  const wrapperEl = wrapper.value;
  const parentEl = parent.value;
  if (wrapperEl && parentEl && wrapperEl.clientWidth) {
    // 计算地图应该居中显示的偏移量
    // 由于CSS已经设置了left: 50%, top: 50%，我们需要调整偏移量使地图真正居中
    const parentWidth = parentEl.clientWidth;
    const parentHeight = parentEl.clientHeight;
    const wrapperWidth = wrapperEl.clientWidth;
    const wrapperHeight = wrapperEl.clientHeight;

    // 基于x_coordinates和y_coordinates计算焦点位置的偏移
    // 这里的计算确保指定的坐标点显示在视口中心
    xOffset.value = -(
      (wrapperWidth * x_coordinates.value) / 100 -
      parentWidth / 2
    );
    yOffset.value = -(
      (wrapperHeight * y_coordinates.value) / 100 -
      parentHeight / 2
    );
  }
  setOffset(xOffset.value, yOffset.value);
};

const setHoverIdx = (idx: number) => {
  hoverIdx.value = idx;
};

const removeHoverIdx = (idx: number) => {
  if (idx === hoverIdx.value) hoverIdx.value = NaN;
};

const onLoadImage = () => {
  centerOffset();
  nextTick(() => {
    const isMobileOrTablet = typeof window !== 'undefined' ? window.innerWidth <= 768 : false; // SSR safe
    if (!isMobileOrTablet) return;
    setTimeout(() => (hadDrag.value = true), 1300);
  });
};

const updateMouse = (e: MouseEvent | TouchEvent) => {
  e.preventDefault();
  const parentEl = parent.value;
  if (!parentEl) return;
  const rect = parentEl.getBoundingClientRect();
  if (e.type === "touchmove") {
    const touchEvent = e as TouchEvent;
    mouseX.value = touchEvent.touches[0].clientX - rect.left;
    mouseY.value = touchEvent.touches[0].clientY - rect.top;
  } else {
    const mouseEvent = e as MouseEvent;
    mouseX.value = mouseEvent.clientX - rect.left;
    mouseY.value = mouseEvent.clientY - rect.top;
  }
};

// Watchers
watch(mapInfo, () => {
  focusIdx.value = NaN;
});

watch(
  () => typeof window !== 'undefined' ? window.innerWidth : 1024,
  () => {
    // Temporary solution for $_vsWidth
    centerOffset();
  }
);

watch(active, () => {
  hadDrag.value = true;
});

watch(xOffset, () => {
  const wrapperEl = wrapper.value;
  if (!wrapperEl) return;
  const width = wrapperEl.getBoundingClientRect().width;
  const vsWidth = typeof window !== 'undefined' ? window.innerWidth : 1024; // SSR safe
  const bound = {
    right: -width + vsWidth / 2,
    left: (-1 * vsWidth) / 2,
  };
  showPrevArrow.value = bound.left - xOffset.value > 50;
  showNextArrow.value = xOffset.value - bound.right > 50;
});

watch(yOffset, () => {
  const wrapperEl = wrapper.value;
  const parentEl = parent.value;
  if (!wrapperEl || !parentEl) return;
  const height = wrapperEl.getBoundingClientRect().height;
  const parentHeight = parentEl.getBoundingClientRect().height;
  const bound = {
    top: -height + parentHeight / 2,
    bottom: (-1 * parentHeight) / 2,
  };
  showUpArrow.value = bound.bottom - yOffset.value > 50;
  showDownArrow.value = yOffset.value - bound.top > 50;
});

// 监听 focosObj 的变化
watch(
  focosObj,
  (newValue, oldValue) => {
    console.log("focosObj 发生变化:", { newValue, oldValue });
    // 在这里处理 focosObj 变化的逻辑
  },
  {
    deep: true, // 如果需要深度监听对象内部属性变化
    immediate: true, // 如果需要立即执行一次
  }
);

// Lifecycle
onMounted(() => {
  centerOffset();
});
</script>

<style lang="scss" scoped>
.map-static {
  position: relative;
  height: 537px;
  overflow: hidden;

  /* @include media-breakpoint-down(md) 替换为原生CSS */
  @media (max-width: 767.98px) {
    height: 447px;
  }

  @keyframes map-wrapper {
    from {
      filter: blur(3px);
    }
  }

  .map__wrapper {
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    cursor: grab;
    animation-name: map-wrapper;
    animation-duration: 0.5s;
    animation-timing-function: linear;

    // &__blur {
    //  filter: blur(4px);
    //  }

    .map__img {
      width: auto;
      height: 100%;
      pointer-events: none;
    }

    @keyframes map-marker {
      0% {
        opacity: 0;
        transform: translateX(-50%);
      }
      25% {
        opacity: 0.4;
        transform: translateX(-50%);
      }
    }

    .map__marker {
      position: absolute;
      width: 20px;
      height: 28px;
      /* @include bg-image('~static/images/icons/icon-marker.svg') 替换为原生CSS */
      background-image: url("@/assets/icon-marker.svg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: rgba(255, 255, 255, 0);
      cursor: pointer;
      pointer-events: visible;
      transform-origin: center bottom;
      animation-name: map-marker;
      animation-duration: 1.5s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;

      /* @include media-breakpoint-up(md) 替换为原生CSS */
      @media (min-width: 768px) {
        transition: background-image 0.3s ease-in-out;
      }

      /* @include media-breakpoint-down(md) 替换为原生CSS */
      @media (max-width: 767.98px) {
        width: 22.5px;
        height: 31.5px;
      }

      &.is-blur {
        background-image: url("@/assets/icon-marker--blur.svg");
      }

      &.is-active,
      &:hover {
        width: 25px;
        height: 35px;
        background-image: url("@/assets/icon-marker--active.svg");
        z-index: 1;

        /* @include media-breakpoint-down(md) 替换为原生CSS */
        @media (max-width: 767.98px) {
          width: 20px;
          height: 28px;
        }
      }

      &::after {
        position: absolute;
        content: attr(data-title);
        font-size: 13px;
        line-height: 2.153;
        font-weight: bold;
        color: #000;
        white-space: nowrap;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
        pointer-events: none;
      }

      &.is-name-left {
        &::after {
          left: 0;
          bottom: auto;
          top: 50%;
          transform: translate(-100%, -20%);
        }
      }

      &.is-name-right {
        &::after {
          right: 0;
          left: auto;
          bottom: auto;
          top: 50%;
          transform: translate(100%, -20%);
        }
      }
    }
  }

  .map__detail {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-end;
    z-index: 2;
    pointer-events: none;

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      bottom: 21px;
      justify-content: center;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.2s ease-out;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to,
  .fade-leave {
    opacity: 1;
  }

  .map-prev,
  .map-next,
  .map-up,
  .map-down {
    position: absolute;
    width: 30px;
    height: 30px;
    /* @include bg-image('~static/images/icons/icon-map-arrow.svg') 替换为原生CSS */
    background-image: url("@/assets/icon-map-arrow.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      width: 20px;
      height: 20px;
    }
  }

  .map-prev,
  .map-next {
    top: 50%;
  }

  .map-up,
  .map-down {
    left: 50%;
  }

  .map-prev {
    left: 32px;
    transform: translateY(-50%);

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      left: 7px;
    }
  }

  .map-next {
    right: 32px;
    transform: translateY(-50%) scale(-1);

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      right: 7px;
    }
  }

  .map-up {
    top: 24px;
    transform: translateX(-50%) rotateZ(90deg);

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      top: 7px;
    }
  }

  .map-down {
    bottom: 24px;
    transform: translateX(-50%) rotateZ(270deg);

    /* @include media-breakpoint-down(md) 替换为原生CSS */
    @media (max-width: 767.98px) {
      bottom: 7px;
    }
  }

  .map-hint {
    position: absolute;
    padding: 12px;
    background: #fff;
    border-radius: 7px;
    /* @include tx-body-small 替换为原生CSS */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.428;
    color: #333333;
    transform: translateY(calc(-100% - 25px));
    display: flex;
    align-items: center;
    will-change: top, left;
    pointer-events: none;

    &::before {
      content: "";
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      /* @include bg-image('~static/images/icons/icon-drag-cross.svg') 替换为原生CSS */
      background-image: url("@/assets/icon-drag-cross.svg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: rgba(255, 255, 255, 0);
      margin-right: 9px;
    }
  }

  .map-hint-fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.5);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &__hint {
      color: #fff;
      display: flex;
      align-items: center;
      /* @include tx-body-big 替换为原生CSS */
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.01em;

      &::before {
        content: "";
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        /* @include bg-image('~static/images/icons/icon-drag-cross--white.svg') 替换为原生CSS */
        background-image: url("@/assets/icon-drag-cross--white.svg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        margin-right: 9px;
      }
    }
  }
}

.mapstatic-container {
  position: relative;
}
</style>
